<template>
    <div class="box">
        <div class="row article_title">
            <h3>{{ title }}</h3>
        </div>
        <div class="row article_info">
            <div class="col-xs-4">
                发布人：{{ author }}
            </div>
            <div class="col-xs-8">
                发布时间：{{ releasetime }}
            </div>
        </div>
        <div class="row article_content">
            {{ content }}
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return {
            title:'',
            author:'',
            releasetime:'',
            content:''
        }
    },
    methods :{
        getArticleInfo(){
            axios.get('/api/article.json?id=' + this.$route.params.id)
            .then(this.getArticleInfoSucc)
        },
        getArticleInfoSucc(res){
            res = res.data
            if(res.ret && res.data){
                var data = res.data
                this.title = data.title
                this.author = data.author
                this.releasetime = data.releasetime
                this.content = data.content
            }
        }
    },
    mounted(){
        this.getArticleInfo()
    }
}
</script>
<style scoped>
.box {
  margin-bottom: 80px; }
.article_title {
  text-align: center; }

.article_title h3 {
  font-size: 20px;
  font-weight: bold; }

.article_info {
  border-bottom: 1px solid #ccc;
  padding: 10px 0; }

.article_content {
  padding: 10px;
  line-height: 36px;
  font-size: 16px; }

.article_content img {
  width: 100%; }
</style>
